<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>无限分类树</title>
    <script src='/static/js/jquery-1.12.1.min.js'></script>
</head>
<body>


    <br>
    <hr>
    <div id="div_menu"></div>


    <script>

	var mylist = '{% raw mylist %}';
	console.log(mylist);

var childlist = {
        "childlist" : jQuery.parseJSON(mylist)
    }
    function showall(childlist,parent){

        for ( var child in childlist) {
            //如果有子节点，则遍历该子节点
				if(childlist[child].hasOwnProperty('childlist')){
                //创建一个子节点a
                var la = $("<a></a>");
                //创建一个子节点li
                var li = $("<li></li>");
                $(la).append(childlist[child].name);
                //将li的文本设置好，并马上添加一个空白的ul子节点，并且将这个li添加到父亲节点中
                $(li).append(la).append("<ul></ul>").appendTo(parent);
                //将空白的ul作为下一个递归遍历的父亲节点传入
				//递归
                showall(childlist[child].childlist, $(li).children().eq(1));
            }
            //如果该节点没有子节点，则直接将该节点li以及文本创建好直接添加到父亲节点中
            else {
                var la = $("<a></a>");
                var li = $("<li></li>");
                $(la).append(childlist[child].name);
                $(li).append(la).appendTo(parent);
            }
        }
    }

    $(document).ready(function() {
       
            var showlist = $("<ul></ul>");
            showall(childlist.childlist, showlist);
            $("#div_menu").append(showlist);
       

    });
    
    
    </script>



    
</body>
</html>